<template>
  <div class="home">
    <div class="es">
      <div class="es-records">
        <div>
          <span style="font-weight: bold; color: red;">分值达到10以上便是热搜词汇</span>
        </div>
        <el-button type="warning" icon="el-icon-delete" @click="delAll">删除所有</el-button>

        <!--表格内容-->
        <el-table
          ref="list"
          :data="tableData"
          :key="reflush"
          style="width: 100%"
          border
          stripe
          highlight-current-row
          :default-sort="{prop: 'date', order: 'descending'}"
          @row-click="handleRowClick"
          @select-all="handleCheckedAllAndCheckedNone"
          @select="handleCheckedAllAndCheckedNone">
          <el-table-column
            type="selection"
            width="45"
            align="center">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            property="date"
            label="日期"
            width="230"
            sortable>
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 5px">{{dateTimeFormat(scope.row.date)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="name"
            label="名称"
          >
            <template slot-scope="scope">
              <span class="col-cont" v-html="showText(scope.row.name,scope.row.score)"></span>
            </template>
          </el-table-column>
          <el-table-column
            property="score"
            width="100"
            label="分值">
          </el-table-column>
          <el-table-column
            property="number"
            width="100"
            label="次数">
          </el-table-column>
          <el-table-column
            label="操作"
            width="130"
            align="center">
            <template slot-scope="scope">
              <el-button icon="el-icon-search" circle title="搜索" size="small"
                         @click="search(scope.$index, scope.row, $event)"></el-button>
              <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                         @click="rowDel(scope.$index, scope.row, $event)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SearchRecords",
    data() {
      return {
        formFileds: {
          date: '',
          name: '',
          score: '',
          number: '',
          id: ''
        },
        tableData: [],
        isShowEditDialog: false,
        reflush: false
      }
    },
    methods: {
      handleRowClick(row, event, column) {
        // 仅选中当前行
        this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {
        // 当前选中仅一行时操作-（当前表格行高亮）
        1 != selection.length && this.$refs.list.setCurrentRow();
      },
      delAll() {
        this.$confirm('确定要删除所有吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.$axios.get('/poem/removeAll', {
            params: {
              key: 'es-search'
            }
          }).then(res => {
            this.$message.success('删除成功');
            this.searchRecords();
          })
        })
      },
      rowDel(index, row, event) {
        var that = this;
        // 让当前删除按钮失焦
        event.target.blur();
        this.$confirm('确定要删除当前行吗？', '删除', {
          comfirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.$axios.get('/poem/removeementScore', {
            params: {
              key: 'es-search',
              value: row.name
            }
          }).then(res => {
            console.log('result:', res.data.result)
            if (res.data.result == true) {
              console.log('result-1:', res.data.result)
              //that.tableData.splice(index, 1);
              that.$message.success('删除成功');
              this.searchRecords();
            }
          })
          return false;
        });
      },
      search(index, row, event) {
        this.$router.push({path: '/index', query: {keyword: row.name}});
      },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {
        this.$refs.list.clearSelection();
        this.$refs.list.toggleRowSelection(row);
      },
      dateTimeFormat(value) {
        var time = new Date(+value);
        var rightTwo = (v) => {
          v = '0' + v
          return v.substring(v.length - 2, v.length)
        }
        if (time == null) return;
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        return year + '-' + rightTwo(month) + '-' + rightTwo(date) + ' ' + rightTwo(hours) + ':' + rightTwo(minutes) + ':' + rightTwo(seconds);
      },
      // 筛选变色
      showText(val, score) {
        if (score >= 10) {
          return val.replace(val, '<span style="color: red; ">' + val + '</span>')
        } else {
          return val
        }
      },
      searchRecords() {
        this.$axios.get('/poem/rangeWithScores', {
          params: {
            key: 'es-search'
          }
        }).then(res => {
          console.log('result:', res.data.result)
          this.tableData = res.data.result;
        })
      },
      createDiv() {
        // this.$message.success('单击了');
        var html = '';
        this.tableData.map(t => {
          console.log(t.name)
          html += "<div>" + t.name + "</div>";
        })
      }
    },
    //在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
    activated() {
      this.searchRecords();
    }
    //监控数据是否改变,会消耗性能
    // watch: {
    //   tableData() {
    //     this.searchRecords();
    //   }
    // }
  }
</script>

<style scoped lang="less">
  .home {
    height: calc(~'100% - 40px');
  }

  .es {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .es-records {
    position: relative;
    width: 100%;
    background-color: @boxBgColor;
    box-shadow: 2px 2px 5px #ccc;
    overflow-y: auto;
  }

  .el-form {
    padding: 0 10px;
  }

  .el-date-editor {
    width: 100% !important;
  }

</style>
